<template>
  <div class="editAddress">
    <div class="height">
      <i class="el-icon-arrow-left" @click="goBack"></i>
      <span>编辑地址</span>
    </div>
    <div class="addressBox">
        <el-input v-model="addressList.name" placeholder="收件人姓名"></el-input>
        <el-input v-model="addressList.phone" placeholder="手机号码"></el-input> 
        <el-input placeholder="请输入门牌号" v-model="input" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option v-for="(item,index) in buildNumbers" :key="index" :label="item.dicCode" :value="item.dicCode"></el-option>
          </el-select>
        </el-input>
      <div class="radio">
          <el-radio v-model="radio" :label="addressList.status" @change="DefaultAddress(addressList.id)">设为默认地址</el-radio>
      </div>
      
    </div>
    <div class="btn">
        <div class="buttonText" @click="submitAddress">保 存</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'editAddress',
  data () {
    return {
      addressList:{
         name: '',
         phone: '',
         address: '',
      },
      radio: 0,
      addressId: '',
      input: '#',
      select: '',
      buildNumbers: []
    }
  },
  computed:{
    token() {
      return this.$store.state.app.token
    },
    userId() {
      return this.$store.state.app.userId
    },
  },
  created(){
      // this.addressId = this.$router.query.id;
      // alert(this.addressId)
      // this.mailAddress()
      this.axios({
          method: 'post',
          url: '/app/app/common/queryBuildingNumber',
          headers: {'userId': this.userId,'token': this.token},
          data: {}
      }).then(res =>{
          // console.log(res.data);
          this.buildNumbers = res.data.data.buildNumbers;
          this.select = this.buildNumbers[0].dicCode
      })
      this.addressList = JSON.parse(localStorage.address) 
      
  },
  methods:{
    goBack(){
      this.$router.push("/addressList");
    },
    mailAddress(){
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
        });
        this.axios({
            method: 'post',
            url: '/app/campus/mailAddress/list4userId',
            headers: {'userId': this.userId,'token': this.token},
            data: {
              pageNo: 1,
              pageSize: 10,
            }
        }).then(res =>{
            // console.log(res.data);
            
            if(res.data.data.length > 0){
                res.data.data.forEach( fruit => {
                  if(fruit.id == this.addressId){
                    this.addressList = fruit; 
                  }
                })
                
            }
            loading.close();
        })
    },
    DefaultAddress(id){
        this.axios({
            method: 'post',
            url: '/app/campus/mailAddress/updateDefaultMailAddress',
            headers: {'userId': this.userId,'token': this.token},
            data: {
              id: id,
            }
        }).then(res =>{
            console.log(res.data);
            this.getDefaultMailAddress();
        })
    },
    submitAddress(){
      this.addressList.address = this.select+this.input
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
        });
        this.axios({
            method: 'post',
            url: '/app/campus/mailAddress/updateMailAddress',
            headers: {'userId': this.userId,'token': this.token},
            data: this.addressList
        }).then(res =>{
            console.log(res.data);
            
            if(res.data.message.code == 200){
              this.goBack()
            }else{
                this.$message.error('错了哦，修改失败！');
            }
            loading.close();
        })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.height{
  background: #fcd927;height: 42px;font-size: 16px;line-height: 42px;text-align: center;color: #fff;padding: 0 8px;display: flex;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);margin-bottom: 3px;
}
.height i{line-height: 42px;font-size: 18px;width: 30px;}
.addressBox{background: #fff;margin-bottom: 3px;padding: 5px;}
.btn{padding: 35px;}
.buttonText{height: 40px;background: crimson;font-size: 16px;line-height: 40px;color: #fff;border-radius: 4px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);}
.addressBox .el-input,.addressBox .el-textarea,.radio{margin: 10px 0;}

</style>
<style lang="">
 .input-with-select .el-select .el-input {width: 120px;}
.input-with-select .el-input-group__prepend {background-color: #fff;}
</style>
